<template>
  <view class="wrap">
    <view class="content">
      <view class="title">用户登录</view>
      <view class="form-item">
        <input v-model="form.username" type="text" placeholder="请输入用户名" />
      </view>
      <view class="form-item">
        <input v-model="form.password" type="password" placeholder="请输入密码" />
      </view>
      <button class="login-btn" @click="login" :loading="isLoading">
        {{isLoading ? '登录中...' : '登录'}}
      </button>
      <view class="register-text" @click="toRegister">还没有账号，请立即注册</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      isLoading: false
    }
  },
  methods: {

    async login() {
      // 表单验证
      if (!this.form.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载状态
      this.isLoading = true;
      
      try {
        const res = await uniCloud.callFunction({
          name: 'user',
          data: {
            action: 'login',
            username: this.form.username,
            password: this.form.password
          }
        });
        
        if (res.result.code === 200) {
          uni.showToast({
            title: '账号登录成功',
            icon: 'success'
          });
          uni.showModal({
            title: '提示',
            content: '登录成功！即将跳转至首页',
            showCancel: false,
            success: () => {
              uni.navigateTo({
                url: '/pages/index/index'
              });
            }
          });

          // 存储用户信息
          uni.setStorageSync('userInfo', res.result.data);
          // 延迟跳转，确保提示可见
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/index/index'
            });
          }, 10);
        } else {
          uni.showToast({
            title: res.result.msg,
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('登录错误:', error);
        uni.showToast({
          title: '网络错误，请检查网络连接',
          icon: 'none'
        });
      } finally {
        // 隐藏加载状态
        this.isLoading = false;
      }
    },

    toRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      });
    }
  }
}
</script>

<style scoped>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.content {
  width: 80%;
  padding: 40rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.form-item {
  margin-bottom: 30rpx;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid #e4e7ed;
  border-radius: 10rpx;
}

.login-btn {
  margin-top: 40rpx;
  background-color: #2979ff;
  color: white;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
}

.register-text {
  margin-top: 30rpx;
  text-align: center;
  color: #2979ff;
  font-size: 28rpx;
}
</style>